<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
</head>
<body>
  <style id="demo2"></style>
  <div id="demo"></div>
  <div id="buttons">
    <button id="btnPause">暂停</button>
    <button id="btnPlay">播放</button>
    <button id="btnSlow">慢速</button>
    <button id="btnNormal">中速</button>
    <button id="btnFast">快速</button>
  </div>
  <style>
    *{box-sizing: border-box;}
    *::before, *::after{box-sizing: border-box;}
    #demo{
      position: fixed;
      height: 50vh;
      top: 0;
      left: 0;
      width: 100%;
      border: 1px solid red;
      overflow-y: auto;
    }
    #demo::-webkit-scrollbar {
      display: none;
    }
    #demo2{
      display: none;
    }
    #buttons {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      margin-right: 10px;
    }
    #buttons>button {
      margin-bottom: 10px;
    }
    #html{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50vh;
    }
    .face > img {
      display: none;
    }
  </style>
  <div id="html">
    <div class="skin">
      <div class="eye left"></div>
      <div class="eye right"></div>
      <div class="nose">
        <div class="yuan"></div>
      </div>
      <div class="face left">
        <img src="./images/flash.gif">
      </div>
      <div class="face right">
        <img src="./images/flash.gif">
      </div>
      <div class="mouth">
        <div class="up">
          <div class="lip left"></div>
          <div class="lip right"></div>
        </div>
        <div class="down">
          <div class="yuan1">
            <div class="yuan2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="test.js"></script>
</body>
</html>